<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <link rel="stylesheet" href="API/js/DataTables/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/Jquery/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/JqueryMobile/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="API/js/DataTables/js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript" src="API/js/functionsLib.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>
    <script type="text/javascript" src="http://wowjs.zamimg.com/widgets/power.js?1389797934"></script>

    <script type="text/javascript">
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 21;
    var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": true };

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////

    //Fin chargement page
    function OnLoad() {
        try {
            chargerCars();
            chargerCollection();
            buildChoixSetToImport();
        } catch (er) {
            $.functionsLib.log(0, "ERROR(OnLoad):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS METIER
    ///////////////////
    /**
     * chargerCollection
     */
    function chargerCollection(){
        try {
            var strhtml = "<IMG SRC=\"API/img/loading.gif\" ALT=\"Chargement\" TITLE=\"Chargement\">";
            $('#div_collection').html(strhtml);
            var tabSetting = { functionRetour : retourCollection};
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user };
            $.functionsLib.callRest(domaine+"phpsql/getCollection.php", tabSetting, tabInput);            
        } catch (er) {
            $.functionsLib.log(0, "ERROR(chargerCollection):" + er.message);
        }
    }
    
    /**
     * chargerCars
     */
    function chargerCars(){
        try {
            var strhtml = "<IMG SRC=\"API/img/loading.gif\" ALT=\"Chargement\" TITLE=\"Chargement\">";
            $('#div_inventaire').html(strhtml);
            var tabSetting = { functionRetour : retourCards};
            var tabInput = { type : "collection", code_user : $.functionsLib.getUserInfo().code_user };
            $.functionsLib.callRest(domaine+"phpsql/getCards.php", tabSetting, tabInput);            
        } catch (er) {
            $.functionsLib.log(0, "ERROR(chargerCars):" + er.message);
        }
    }
    
    /**
     * choisir
     */
    function choisir(p_id_card, p_gold){
        try {
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user, id_card : p_id_card, gold : p_gold };
            var json_retour = $.functionsLib.callRest(domaine+"phpsql/addCollection.php", {}, tabInput);
            if(json_retour["strErreur"] == ""){
                $.functionsLib.notification("Bravo", $.functionsLib.oda_msg_color.INFO); 
                chargerCollection();
                if(parseInt(json_retour["data"]["resultat"]["nb_non_gold"]) >= 2){
                     $('#bt_card_'+json_retour["data"]["resultat"]["id"]+'_1').addClass('ui-disabled');
                }
                if(parseInt(json_retour["data"]["resultat"]["nb_gold"]) >= 2){
                     $('#bt_card_'+json_retour["data"]["resultat"]["id"]+'_2').addClass('ui-disabled');
                }
            }else{
                $.functionsLib.notification("Aie erreur!", $.functionsLib.oda_msg_color.ERROR);
            }            
        } catch (er) {
            $.functionsLib.log(0, "ERROR(choisir):" + er.message);
        }
    }
    
    /**
     * dez
     */
    function dez(p_nb_avant, p_id_coll){
        try {
            var tabInput = { id_coll : p_id_coll, code_user : $.functionsLib.getUserInfo().code_user };
            var json_retour = $.functionsLib.callRest(domaine+"phpsql/removeCollection.php", {}, tabInput);
            if(json_retour["strErreur"] == ""){
                $.functionsLib.notification("Bravo", $.functionsLib.oda_msg_color.INFO); 
                chargerCollection();
                if(p_nb_avant == 2){
                    chargerCars();
                }
            }else{
                $.functionsLib.notification("Aie erreur!", $.functionsLib.oda_msg_color.ERROR);
            }            
        } catch (er) {
            $.functionsLib.log(0, "ERROR(dez):" + er.message);
        }
    }

    /**
     * @name filtreQualite
     */
    function filtreQualite() {
        try {
            var checkbox_commune = $('#checkbox_commune').is(':checked'); 
            var checkbox_rare = $('#checkbox_rare').is(':checked'); 
            var checkbox_epique = $('#checkbox_epique').is(':checked'); 
            var checkbox_legendaire = $('#checkbox_legendaire').is(':checked'); 
            
            var strhtml = "<IMG SRC=\"API/img/loading.gif\" ALT=\"Chargement\" TITLE=\"Chargement\">";
            $('#div_collection').html(strhtml);
            var tabSetting = { functionRetour : retourCollection};
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user
                , qualite_commune : checkbox_commune
                , qualite_rare : checkbox_rare
                , qualite_epique : checkbox_epique
                , qualite_legendaire : checkbox_legendaire
            };
            $.functionsLib.callRest(domaine+"phpsql/getCollection.php", tabSetting, tabInput);      
        } catch (er) {
            $.functionsLib.log(0, "ERROR(filtreQualite):" + er.message);
        }
    };
    
    /**
     * @name importSet
     */
    function importSet(p_setName) {
        try {
            var strhtml = "<IMG SRC=\"API/img/loading.gif\" ALT=\"Chargement\" TITLE=\"Chargement\">";
            $('#div_collection').html(strhtml);
            var tabSetting = { functionRetour : chargerCollection()};
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user
                , set : p_setName
            };
            $.functionsLib.callRest(domaine+"phpsql/importSet.php", tabSetting, tabInput);      
        } catch (er) {
            $.functionsLib.log(0, "ERROR(importSet):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
    /**
     * @name : buildChoixSetToImport
     */
    function buildChoixSetToImport(){
        try {
            var strHtml = '<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"><legend>Choix du set &agrave; importer : </legend>';
            for (var indice in tab_sets) {
                if(indice != 0){
                    strHtml += '<input type="checkbox" onchange="importSet(\''+tab_sets[indice]+'\');" id="'+indice+'"><label for="'+indice+'">'+tab_sets[indice]+'</label>';
                }
            }
            strHtml += '</fieldset>';
            $('#contentChoixSet').html(strHtml).trigger('create');
        } catch (er) {
            $.functionsLib.log(0, "ERROR(buildChoixSetToImport):" + er.message);
        }
    };
    
    /**
     * retourCards
     * 
     * @param {array} p_retour
     */
    function retourCards(json_retour){
        try {
            if(json_retour["strErreur"] == ""){
                var strhtml = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="table_cards"></table></br></br>';
                $('#div_inventaire').html(strhtml).trigger('create');

                var objDataTable = $.functionsLib.objDataTableFromJsonArray(json_retour["data"]["cartes"]["data"]);
                var oTable = $('#table_cards').dataTable( {
                    "sPaginationType": "full_numbers",
                    "aaData": objDataTable.data,
                    "aaSorting": [[0,'asc']],
                    "aoColumns": [
                        { sTitle: "Nom", sClass: "left"  },
                        { sTitle: "Mana", sClass: "center", sWidth: "30px" },
                        { sTitle: "Action", sClass: "left", sWidth: "30px" }
                    ],
                   aoColumnDefs: [
                        {//Nom
                            mRender: function ( data, type, row ) {
                                var strHtml = '<a href="http://www.wowhead.com/hearthstone/card='+row[objDataTable.entete["id_link"]]+'" style="color: '+colorCard[row[objDataTable.entete["qualite"]]]+';text-decoration: none">'+row[objDataTable.entete["nom"]]+'</a>';
                                return strHtml;
                            },
                            aTargets: [ 0 ]
                        },
                        {//Mana
                            mRender: function ( data, type, row ) {
                                var strHtml = String(row[9]);
                                return strHtml;
                            },
                            aTargets: [ 1 ]
                        },
                        {//Ajouter
                            mRender: function ( data, type, row ) {
                                var nb_non_gold = parseInt(row[objDataTable.entete["nb_non_gold"]]);
                                var nb_gold = parseInt(row[objDataTable.entete["nb_gold"]]);
        
                                var strHtml = '';
                                if (!(nb_non_gold > 2 && nb_gold > 2)) {
                                    if(nb_non_gold < 2 ){
                                        strHtml += '<a href="javascript:choisir('+row[objDataTable.entete["id"]]+',0)" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true" id="bt_card_'+row[objDataTable.entete["id"]]+'_1">Ajouter</a>';
                                    }else{
                                        strHtml += '<a href="javascript:choisir('+row[objDataTable.entete["id"]]+',0)" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true" id="bt_card_'+row[objDataTable.entete["id"]]+'_1" class="ui-disabled">Ajouter</a>';
                                    }
                                    
                                    if(nb_gold < 2 ){
                                        strHtml += '<a href="javascript:choisir('+row[objDataTable.entete["id"]]+',1)" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true" id="bt_card_'+row[objDataTable.entete["id"]]+'_2">Ajouter dor&eacute;</a>';
                                    }else{
                                        strHtml += '<a href="javascript:choisir('+row[objDataTable.entete["id"]]+',1)" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true" id="bt_card_'+row[objDataTable.entete["id"]]+'_2" class="ui-disabled">Ajouter dor&eacute;</a>';
                                    }
                                }
                                return strHtml;
                            },
                            aTargets: [ 2 ]
                        }
                    ],
                    "fnDrawCallback": function( oSettings ) {
                        $('#table_cards').trigger('create');
                    } 
                });
            } else{
                $('#div_inventaire').html(json_retour["strErreur"]).trigger("create");
            }
        } catch (er) {
            $.functionsLib.log(0, "ERROR(retourCards):" + er.message);
        }
    };
    
    /**
     * retourCollection
     * 
     * @param {array} p_retour
     */
    function retourCollection(json_retour){
        try {
            if(json_retour["strErreur"] == ""){
                var strhtml = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="table_collection"></table></br></br>';
                $('#div_collection').html(strhtml).trigger('create');

                var objDataTable = $.functionsLib.objDataTableFromJsonArray(json_retour["data"]["collection"]["data"]);
                
                var oTable = $('#table_collection').dataTable( {
                    "sPaginationType": "full_numbers",
                    "aaData": objDataTable.data,
                    "aaSorting": [],
                    "aoColumns": [
                        { sTitle: "Nombre", sClass: "center", sWidth: "30px" },
                        { sTitle: "Nom", sClass: "left"  },
                        { sTitle: "Classe", sClass: "center", sWidth: "30px" },
                        { sTitle: "Action", sClass: "left", sWidth: "30px" }
                    ],
                   aoColumnDefs: [
                        {//Nom
                            mRender: function ( data, type, row ) {
                                var strHtml = row[objDataTable.entete["nb"]];
                                return strHtml;
                            },
                            aTargets: [ 0 ]
                        },
                        {//Nombre
                            mRender: function ( data, type, row ) {
                                var dore = "";
                                if(row[objDataTable.entete["gold"]] == "1"){
                                    dore = "&amp;premium";
                                }
                                var strHtml = '<a href="http://www.wowhead.com/hearthstone/card='+row[objDataTable.entete["id_link"]]+dore+'" style="color: '+colorCard[row[objDataTable.entete["qualite"]]]+';text-decoration: none">'+row[objDataTable.entete["nom"]]+'</a>';
                                return strHtml;
                            },
                            aTargets: [ 1 ]
                        },
                        {//Mana
                            mRender: function ( data, type, row ) {
                                var strHtml = row[objDataTable.entete["classe"]];
                                return strHtml;
                            },
                            aTargets: [ 2 ]
                        },
                        {//Ajouter
                            mRender: function ( data, type, row ) {
                                var theme = "a";
                                if(row[objDataTable.entete["gold"]] == "1"){
                                    theme = "b";
                                }
                                var strHtml = '<a href="javascript:dez('+row[objDataTable.entete["nb"]]+','+row[objDataTable.entete["max_id_collec"]]+')" data-role="button" data-icon="delete" data-theme="'+theme+'" data-iconpos="notext" data-inline="true" id="bt_remove_card_'+row[objDataTable.entete["nom"]]+'">Dez</a>';
                                return strHtml;
                            },
                            aTargets: [ 3 ]
                        }
                    ],
                    "fnDrawCallback": function( oSettings ) {
                        $('#table_collection').trigger('create');
                    } 
                });
            } else{
                $('#div_collection').html(json_retour["strErreur"]).trigger("create");
            }
        } catch (er) {
            $.functionsLib.log(0, "ERROR(retourCollection):" + er.message);
        }
    };
</script>

<style>
/* default styles here for older browsers. 
   I tend to go for a 600px - 960px width max but using percentages
*/
/* Stack all blocks to start */
.oda-block-a, 
.oda-block-b { 
    width: 100%; 
    float:none; 
} 
@media only screen and (min-width:960px){
    /* styles for browsers larger than 960px; */
    .oda-block-a{ 
        float:left; 
        width:50%; 
    }
    .oda-block-b{ 
        float:right; 
        width:50%; 
    }
}
@media only screen and (min-width:1024px){
    /* styles for browsers larger than 1440px; */
    .oda-block-a{ 
        float:left; 
        width:40%; 
    }
    .oda-block-b{ 
        float:right; 
        width:60%; 
    }
}
@media only screen and (min-width:1600px){
    /* for sumo sized (mac) screens */
    .oda-block-a{ 
        float:left; 
        width:30%; 
    }
    .oda-block-b{ 
        float:right; 
        width:70%; 
    }
}    
    
//mettre en gris la ligne survolé    
tr.highlight td{background-color:Silver !important;}
</style>

</head>
<body onload="OnLoad();">

    <!-- page -->
    <div data-role="page" data-title="Titre">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

        </div>
        <!-- /panel -->

        <!-- header -->
        <div data-role="header" data-position="fixed">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./api_page_contact.html?mili='+$.functionsLib.getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->
        
        <!-- navbar -->
        <!-- /navbar -->

        <!-- content -->
        <div data-role="content" id="main_content">
            
            <div class="oda-block-a">
                <!-- inventaire -->
                <div data-role="collapsible" data-collapsed="false" data-mini="true" style="width: 99%;">
                    <h3>L'inventaire</h3>
                    <div id="div_inventaire"></div>
                </div>
                <!-- /inventaire -->
            </div>

            <div class="oda-block-b">
                
                <!-- Filtres -->
                <div data-role="collapsible" data-collapsed="true" data-mini="true" style="width: 99%;">
                    <h3>Importer</h3>
                    <div id="contentChoixSet">content</div>
                </div>
                <!-- /Filtres -->
                
                <!-- Filtres -->
                <div data-role="collapsible" data-collapsed="true" data-mini="true" style="width: 99%;">
                    <h3>Les filtres</h3>
                    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                        <legend>Qualit&eacute; : </legend>
                        <input type="checkbox" name="checkbox_commune" id="checkbox_commune" onchange="filtreQualite();">
                        <label for="checkbox_commune">Commune</label>
                        <input type="checkbox" name="checkbox_rare" id="checkbox_rare" onchange="filtreQualite();">
                        <label for="checkbox_rare">Rare</label>
                        <input type="checkbox" name="checkbox_epique" id="checkbox_epique" onchange="filtreQualite();">
                        <label for="checkbox_epique">Epique</label>
                        <input type="checkbox" name="checkbox_legendaire" id="checkbox_legendaire" onchange="filtreQualite();">
                        <label for="checkbox_legendaire">L&eacute;gendaire</label>
                    </fieldset>
                </div>
                <!-- /Filtres -->

                <!-- collection -->
                <div data-role="collapsible" data-collapsed="false" data-mini="true" style="width: 99%;">
                    <h3>Votre collection</h3>
                    <div id="div_collection"></div>
                </div>
                <!-- /collection -->
            </div>
                  
        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./api_page_faq.html?mili='+$.functionsLib.getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./api_page_sortie.html?mili='+$.functionsLib.getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
</body>
</html>